<template>
  <el-popover placement="top" v-model="visible" @show="showRef">
    <div style="font-size: 14px; padding: 4px 4px 16px 30px; position: relative">
      <i class="el-icon-warning" style="color: #E6A23C; font-size: 18px; position: absolute; left: 4px"></i>
      {{ titleMessage }}
    </div>
    <div style="text-align: right; padding: 0 4px 0 4px">
      <el-button @click.stop="visible = false" size="mini">{{ $tt('label_cancel') }}</el-button>
      <el-button :type="confirmButtonType" @click.stop="request()" size="mini">{{ $tt('label_confirm') }}</el-button>
    </div>
    <el-button slot="reference" :type="buttonType" :class="buttonClass" @click.stop="" :disabled="disabled">
      <slot>{{ label }}</slot>
    </el-button>
  </el-popover>
</template>

<script>
export default {
  name: 'confirm-button',
  data() {
    return {
      visible: false,
    }
  },
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    url: {
      type: String,
      default: ''
    },
    urlType: {
      type: String,
      default: 'form'
    },
    message: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: ''
    },
    params: {
      type: Object
    },
    confirmButtonType: {
      type: String,
      default: 'primary'
    },
    buttonClass: [Object, String],
    buttonType: {
      type: String,
      default: 'text'
    },
  },
  computed:{
    titleMessage() {
      return ((this.message && this.message != '') ? this.$tt(this.message) : this.$tt('text_confirm_sure_operate'))
    },
  },
  methods: {
    showRef() {
      this.$emit("show", this)
    },
    hide() {
      this.visible = false
    },
    request() {
      if (this.url) {
        let data = {}
        if (this.params) {
          data = this.params
        }
        this.$ajax({
          url: this.url,
          method: 'post',
          type: this.urlType,
          loading: true,
          data,
          success: (res) => {
            this.$emit('afterOperationDone', res)
          },
          complete: () => {
            this.visible = false
          }
        })
      } else {
        this.$emit('afterOperationDone')
        this.visible = false
      }

    }
  }
}
</script>
